<template>
  <div class="InformationTypeList pd-20">
    <div class="form">
      <el-form :inline="true"
               :model="param"
               class="demo-form-inline">
        <el-form-item label="创建时间">
          <el-col :span="11">
            <el-date-picker type="date"
                            placeholder="选择日期"
                            v-model="param.startTime"
                            style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line"
                  :span="2">-
          </el-col>
          <el-col :span="11">
            <el-date-picker type="date"
                            placeholder="选择日期"
                            v-model="param.endTime"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="资讯类型">
          <el-input v-model="param.informationTypeName"
                    clearable
                    @clear="handleQuery"
                    placeholder="请输入资讯类型"></el-input>
        </el-form-item>
        <el-form-item label="所属栏目">
          <el-select v-model="param.type"
                     placeholder="请选择所属栏目"
                     clearable
                     @clear="handleQuery">
            <el-option v-for="item in typeOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="handleQuery">查 询
          </el-button>
          <el-button type="primary"
                     @click="openForm">新 增
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData"
              style="width: 100%"
              border
              class="mt-20">
      <el-table-column align="center"
                       type="index"
                       min-width="20">
      </el-table-column>
      <el-table-column align="center"
                       prop="type"
                       label="所属栏目"
                       min-width="120"
                       :formatter="formatterType">
      </el-table-column>
      <el-table-column align="center"
                       prop="informationTypeName"
                       label="资讯类型"
                       width="120">
      </el-table-column>
      <el-table-column align="center"
                       prop="createTime"
                       label="创建时间"
                       width="150"
                       :formatter="formatterDate">
      </el-table-column>
      <el-table-column align="center"
                       width="180"
                       label="操作">
        <template slot-scope="scope">
          <el-button type="primary"
                     @click="handleEdit(scope.row)">编 辑
          </el-button>
          <el-button type="danger"
                     @click="handleDel(scope.row)">删 除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @getList="getList"
          :pageTotal="pageTotal"
          ref="page"></page>
    <el-dialog title="新增/编辑"
               :visible.sync="dialogVisible"
               width="30%">
      <el-form ref="formModelRef"
               :model="modifyForm"
               :rules="formModelRules"
               label-width="80px">
        <el-form-item label="所属栏目"
                      prop="type">
          <el-select v-model="modifyForm.type"
                     placeholder="请选择所属栏目"
                     clearable>
            <el-option v-for="item in typeOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资讯类型"
                      prop="informationTypeName">
          <el-input v-model="modifyForm.informationTypeName"
                    class="w-200"
                    placeholder="请输入资讯类型"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitForm">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Page from '@/base/page/page'
import {mapGetters} from 'vuex'

export default {
  name: "InformationTypeList",
  data() {
    return {
      dialogVisible: false,
      param: {
        startTime: '',
        endTime: '',
        informationTypeName: '',
        type: ''
      },
      typeOptions: [
        {
          value: 1,
          label: '健康资讯'
        },
        {
          value: 2,
          label: '行业资讯'
        },
        {
          value: 3,
          label: '公司动态'
        }
      ],
      tableData: [],
      pageTotal: 0,
      modifyForm: {
        id: '',
        type: '',
        informationTypeName: ''
      },
      formModelRules: {
        type: [{required: true, message: '请选择所属栏目', trigger: 'change'}],
        informationTypeName: [{required: true, message: '请输入资讯类型', trigger: 'blur'}]
      }
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleQuery() {
      this.page.pageIndex = 0
      this.getList()
    },
    getList() {
      let data = Object.assign({}, this.page, this.param);
      this.post(this.api.informationTypeList.selectPageAll, data).then((res) => {
        if (res.data.code === '200') {
          this.tableData = res.data.object;
          this.pageTotal = res.data.totalNum;
        }
      })
    },
    formatterType(row) {
      if (row.type === 1) {
        return "健康资讯";
      }
      if (row.type === 2) {
        return "行业资讯";
      }
      if (row.type === 3) {
        return "公司动态";
      }
    },
    formatterDate(row) {
      return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
    },
    openForm() {
      this.dialogVisible = true;
      this.modifyForm = {
        id: '',
        type: '',
        informationTypeName: ''
      }
      if (this.$refs['formModelRef']) {
        this.$refs['formModelRef'].resetFields();
      }
    },

    submitForm() {
      this.$refs['formModelRef'].validate((valid) => {
        if (valid) {
          this.post(this.api.informationTypeList.save, this.modifyForm).then((res) => {
            if (res.data.code === '200') {
              this.$message.success('保存成功!');
              this.dialogVisible = false;
              this.getList();
            }
          })
        }
      })
    },
    handleEdit(row) {
      this.dialogVisible = true;
      this.modifyForm = Object.assign({}, row);
    },
    handleDel(row) {
      this.$confirm('您确认删除该信息？')
        .then(_ => {
          this.ajax({
            type: 'post',
            url: this.api.informationTypeList.delete,
            data: {id: row.id},
            success: () => {
              this.$message.success('删除成功!');
              this.getList()
            },
            error: (data) => {
              this.$Message.error(data.message);
            }
          })
        })
        .catch(_ => {
        });
    },
  },
  computed: {
    ...mapGetters([
      'page'
    ])
  },
  components: {
    Page
  }
}
</script>

<style scoped>
.form {
  margin: 10px 10px;
}

.el-form--inline .el-form-item {
  margin-right: 30px;
}

.el-col-2 {
  width: 2%;
}
</style>
